<template>
  <view>
    <view class="search-bar">
      <uni-icons type="search" size="30" color="#d3c9bb"></uni-icons>
      <input v-model="keyword" class="search-input" focus confirm-type="search" placeholder="请输入您搜索的商品" />
      <button @click="goListPage">搜索</button>
		</view>

    <view class="search-history" v-if="searchHistory[0]">
      <view class="history-header">
        <text>最近搜索</text>
        <uni-icons @click="deleteHistory" type="trash" size="20" color="#777777"></uni-icons>
      </view>
      <view class="history-body">
        <view class="item-box" v-for="(item,index) in searchHistory" :key="index" @click="fillHistory(item)">
          <view class="history-item">{{item}}</view>
        </view>
      </view>
    </view>
    
  </view>
</template>

<script>
export default {
  name:'SearchPage',
  data(){
    return {
      keyword:'',
      searchHistory:[]
    }
  },
  onLoad(){
    const str = uni.getStorageSync('search-history')
    this.searchHistory = str? JSON.parse(str) : []
  },
  methods:{
    goListPage(){
      this.saveHistory()
      uni.navigateTo({
        url:'/pages_sub1/product-list/product-list?keyword=' + this.keyword
      })
      this.keyword = ''
    },
    saveHistory(){
      if (this.keyword.trim()==='') return this.$toast('请输入搜索内容')
      const flag = this.searchHistory.includes(this.keyword)
      if (!flag) this.searchHistory.unshift(this.keyword)
      if (this.searchHistory.length>10) this.searchHistory.pop()
      uni.setStorageSync('search-history', JSON.stringify(this.searchHistory))
    },
    fillHistory(item){
      this.keyword = item
    },
    deleteHistory(){
      this.searchHistory=[]
      uni.removeStorageSync('search-history')
    }
  }
}
</script>

<style lang="scss">
  page {
    background-color: #f7f7f7;
  }
  .search-bar{
    box-sizing: border-box;
    margin: 20rpx auto;
    padding-left: 20rpx;
    width: 680rpx;
    height: 100rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border-radius: 20rpx;
    overflow: hidden;
    button{
      margin:0;
      width: 160rpx;
      height: 100rpx;
      background-color: #fa2209;
      color: #fff;
      font-size: 40rpx;
      border-radius: 0;
    }
  }
  .search-history {
    .history-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 50rpx;
      padding:20rpx;
      text{
        font-size: 36rpx;
        color: #777777;
      }      
    }
    .history-body {
      display: flex;
      flex-wrap: wrap;
      padding: 0 30rpx;
      .item-box {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 33.33%;
        height: 100rpx;
        background-color: #f7f7f7;
        .history-item {
        width: 200rpx;
        height: 80rpx;
        background-color: #fff;
        border-radius: 50rpx;
        text-align: center;
        line-height: 80rpx;
      }
      }

    }
  }
</style>